<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>
	
	<body>
		<div id="loading"> <!--加载页面-->
			<img class="loadingtext" src="img/loading_txt.png" />
			<img class="loadingtop" src="img/loading_bg_top.png"/>
			<div class="LOAD">LOADING...</div>
			<div class="loadingpercent "></div>
			<img class="loadingbottom" src="img/loading_bg_bottom.png"/>
		</div>

		<div id="ready">
			<div class="mengban"></div>
			<img src="img/tips1.png" class="tips1"/>
			<img src="img/head.png" class="headimg"/>
		</div><!--	开始页面-->

		<div id="bgr">		<!--主页面-->
			<img src="img/head.png" class="headimg"/>
			<img class="bg" src="img/bg_back.jpg" />
			<img class="end" src="img/end.png" />
			<img class="begin" src="img/begin_paodao_bg.png"/><div class="clearfix"></div>
			<img class="powerwrap" src="img/power_wrap.png" alt="" />
		
			<div class="powerhidden">
				
			<img class="power" src="img/power.png" alt="" />
			
			</div>
				
			
			<ul id="cloud">
				<li><img src="img/sky_bg1.png"/></li>
				<li><img src="img/sky_bg2.png"/></li>
			</ul>
			<ul id="xingxing">
				<li>
				<img class="xingxing" src="img/xingxing_bg.png"/>	
				</li>
				<li>
				<img class="xingxing" src="img/xingxing_bg.png"/>	
				</li>
				
			</ul><div class="clearfix"></div>
			<ul id="paodao">
				<li>
				<img class="paodao" src="img/paodao_bg1.png"/>	
				</li>
				<li>
				<img class="paodao" src="img/paodao_bg2.png"/>	
				</li>
				<li>
				<img class="paodao" src="img/paodao_bg1.png"/>	
				</li>
			</ul><div class="clearfix"></div>
			
			
				<div id="bear">
						<img class="bear" src="img/bear.png"/>
						<img class="zhentou" src="img/zhentou1.png"/>
					</div>
				<div class="clearfix"></div>
				
		</div>
		<div id='again'>      <!--结束页面-->
			<div class="zhegai"></div>
			<div class="chengji">
				<img src="img/chengji.jpg"/>
				
				<img src="img/again.png" class="playagain"/>
				
				<img src="img/kengdie.png"/>
				<p>1111</p>
				<p>6666</p>
			</div>
		</div>
		
		
	</body>	
<!--/REM字体格式/-->
	<script>
    document.body.style.height = window.innerHeight + "px";
     /*动态改变根元素字体大小*/
    function recalc() {
    	//获取客户端宽度
        var clientWidth = document.documentElement.clientWidth;
        if(!clientWidth) return;
       // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
       document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
     }
	function initRecalc() {
        recalc();
        // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
        var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
        if(!document.addEventListener) return;
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
    }
     initRecalc();
     </script>
	<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="preload.min.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript">//s= v * t - 0.5*g*t*^2
	
		var bear = $('#bear');//获取
		var ready=$('#ready');
		var playagain=$('.playagain');
		var bgr=$('#bgr');
		var state=bear.state;
		var endmovie=true;
		var animate=bear.animate="move";
		var h=parseFloat(bear.css("bottom"));//熊当前的位置
		var html_h=parseFloat( $('html').css('height'));// 页面的高度
		var html_w=parseFloat( $('html').css('width'));//页面的宽度
		var Ho=html_h*0.4;//地面的高度
		var jump=html_h*0.1;//跳的距离
		var add=0;				


		var part1=jump*(2/10);
		var part2=jump*(4/10);
		var part3=jump*(6/10);
		var part4=jump*(8/10);
		var part5=jump*(10/10);
		
		
		var bear_left= parseFloat(bear.css('left')); 
		var slide_w=html_w*0.3;
		
		// 	能量条 	  POWER
		var power=$('.powerhidden')
		var power_w=parseFloat($('.powerhidden').css('width'))	// 其实就是对应看到的能量条宽度
		const power_w_init=parseFloat($('.power').css('width'))//一开始powerhidden为0，所以取带颜色的能量条
		var power_click=power_w_init*0.16//点击减少的能量
		var power_add=power_w_init*0.03;
		
		var p_add=0; //能量条蓄力
		var xuli_ing=true;//蓄力判断
		
		// 开始  界面 蓄力事件------- 添加监听
		ready.on('touchstart',function(){
			console.log( 'xuli' ); 
			xuli()
		})
		// 松开蓄力事件-----------······
		ready.on('touchend',function(){
			console.log( '松开' );
			xuli_ing=false;
		})
		
		
		// 点击  再玩一次  
		playagain.on('touchstart',function(){
			// 初始化数据 ```````````````````！！初始化！！`````````````````````
			add=0;
			state=undefined;animate=undefined;
			endmovie=true;//可以进入 end动画
			$('.end').css({'left':html_w+'px'})
			$('.begin').css({'left':html_w+'px'})
			power_w=(html_w*0.96);
			$('.powerhidden').css({ "width":power_w+'px' })
			//初始化熊的位置数据
			bear.css({'bottom':(0.52*html_h)+'px' , 'left':(html_w*0.2)+"px"})
			bear_left= parseFloat(bear.css('left'));
			h=parseFloat(bear.css("bottom"));
			//结束页面恢复
			$('#again').animate({"top":-(html_h)+"px"},550,"linear",function(){
//				ready.css({"left":0+"px"})
				$('#again').css({'left':html_w+'px' ,"top":"0" })
//				watch();
			})
			
			
		})
		
		
		
		// 监听 点击 事件	
		$('body').on('touchstart',watch);
		//点击屏幕时候进行状态的判断
		function watch(){//-----------------------~`~BEAR~`~-------------------------------------
//			let power_w=parseFloat($('.powerhidden').css('width'))
			console.log(state)
			if(power_w<=0.5){
				return;
			}
			if(state=="up"){
				state="second"
			console.log('second'); 
				power_w=power_w-power_click
				power.css({"width":power_w+"px"})
							
				return;//退出当前，不然会进入下面的if
			}
			if(state=="down"){
				state="up";
				console.log('power_click', power_click ); 
				power_w=power_w-power_click
				power.css({"width":power_w+"px"})
				
				return;
			}
			if (state==undefined){
				state="up";
				begining();
				run(4)
				givePower(1000)
			}
		}
		
				 //蓄力
		function xuli(t){
					p_add++;
				//蓄满移走 或者  松开直接开始游戏
				if(power_w>=(html_w*0.96) || xuli_ing==false){
					ready.css({"left":-html_w+"px"})	// 移走开始界面
//					power.css({"transition":"all 200ms linear"}) // 给能量条加过渡
					watch()//开始跳跃
					p_add=0
					console.log('power_w', power_w ); 
						return
				}
				setTimeout(function(){
					power_w=p_add;//power_w只在开头获取了一次，所以这里直接更改，并用来设置能量条的width
					power.css({"width":power_w+"px"})
					
					xuli(1)
				},t)
				
			}
		
		
		//点击的时候往上移动一段距离
		function run(ms){
			
		var t =setTimeout( function(){
				if(state=="second"){
					
//					clearTimeout(t)
					state="up";
					h=h+add;
					add=0;
					console.log("second jump")
					run(4)
					return;
				}
				if(add<4){ //这是每次点击 起跳的效果，只会进入一次
					add+=6;
//					run(4)
				}
				add++;/*console.log("add",add);*/
				bear.css({'bottom':h+add+'px'})

			// 这里的if放在 修改高度后，用于判断add这个增加了的量 到了预定跳跃距离的  哪一部分，进而调节每隔多少毫秒去位移1px
				// 所以这里实现速度的核心  在于每隔多少ms 去位移1个px,时间相隔越小，看起来就速度越快。
				if(part5<add){
					state="down";
					h=h+add;
					add=0;
					drop(4);
				console.log("掉")
					return;
							// 当大于限定距离时，再调用自身这个run，也直接退出函数，不会运行下面的代码
							// 如果放到最后则还是会运行 return前面的代码；
				}
				if(0<add&&add<=part1){
					run(4)
//					console.log(1)
				}if(part1<add&&add<=part2){
//					console.log(2)
					run(6)
				}if(part2<add&&add<=part3){
					run(8)
//					console.log(3)
					
				}if(part3<add&&add<=part4){
					run(10)
//					console.log(4)
					
				}if(part4<add&&add<=part5){
					run(12);/*console.log("part5",part5);*/
//					console.log(5)
					
				}
				
//				console.log()
//				clearTimeout(t)
				
			},ms)
			
		}
		//在空中的时候 下降到地面上
		function drop(ms){
			
			var differ=h-Ho;
			var part1=differ*(1/10);
			var part2=differ*(2/10);
			var part3=differ*(3/10);
			var part4=differ*(8/10);
			var part5=differ*(10/10);
//			console.log(part5)
			var t =setTimeout( function(){
				if(state=="up"){
//					clearTimeout(t)
					h=h-add;
					add=0;
					run(4)
					return;
				}
			
				add++;/*console.log("add",add);*/
				bear.css({'bottom':h-add+'px'})
				
				if(part5<add){
					if(state=="slide"){
						h=h-add;
						add=0;slide(4);
						return;
					}
					state="in the floor";
					console.log("state:",state)
					h=h-add;
					add=0;
					Elastic(4)
					return;
				}
				if(0<add&&add<=part1){
					drop(12)
				}
				if(part1<add&&add<=part2){
					drop(10)
				}
				if(part2<add&&add<=part3){
					drop(7)
				}
				if(part3<add&&add<=part4){
					drop(5)
				}
				if(part4<add&&add<=part5){
					drop(4);
					/*console.log("part5",part5);*/
				}
				
//				console.log()
				clearTimeout(t)
				
			},ms)
			
		}
		//掉落到地面弹一下
		function Elastic(ms){
			var elastic=jump*0.4;// 掉地弹起来的距离是  跳跃距离的10份之4
			part1=elastic*0.5;	// 前半段
			part2=elastic;		// 
			setTimeout(function(){
				add++
				bear.css({"bottom":h+add+"px"})
				
				if(add>elastic){// 如果已经弹了 预定的距离，就开始掉落并退出当前的函数
					h=h+add;
					add=0;
					drop(100);		//开始掉落
					state="slide";	//滑行状态，在drop函数内等待if到了地面时再判断用  if(state=='slide')
					return;
				}
				if(0<add&&add<=part1){	//第一部分上升较快
					Elastic(8);
				}if(part1<add&&add<=part2){	//第二部分上升相对慢
					Elastic(16);
				}
			},ms)
		}
		//掉落地面滑动一段距离··················~SLIDE···········终点动画end也放在这里···········
		function slide(ms){
			
			if(endmovie==true){	// 因为这是一个自调用函数，所以加开关让其只进入一次
				$('.end').animate({"left":-(html_w*0.6)+"px"},1400,"linear",function(){
					$('#again').animate({'left':'0px'},700,"linear")
				})
				endmovie=false//关闭开关
			}
			
//			$('#again').animate({"top":"0px"},500,"linear")
			
			var part1=slide_w*(4/10);
			var part2=slide_w*(8/10);
			var part3=slide_w*(10/10);
			setTimeout(function(){
				add++;
				bear.css({"left":bear_left+add+"px"})
				if(part3<add){
					animate="stop";
					bear_left=bear_left+add
					add=0;
//					$('#again').animate({'left':'0px'},500,"linear")
					return;
				}
				
				if(0<add&&add<=part1){
					animate="slide part1";
					slide(10)
				}
				if(part1<add&&add<=part2){
					animate="slide part2";
					slide(12)
				}
				if(part2<add&&add<=part3){
					animate="slide part3";
					slide(16)
				}
			},ms)
		}
		
		// 调用这个函数，每一段时间给能量条加一点能量
		function givePower(ms){
			var powsss= setInterval(function(){
				//实时获取能量条的宽度
//				let power_w=parseFloat($('.powerhidden').css('width'))
				if(state=="slide"){
//					console.log()
					clearInterval(powsss)
				}
				if(power_w<=0.5){
					console.log("没油了")
					clearInterval(powsss)
					return
				}
				power_w=power_w+power_add
				power.css({"width":power_w+"px"})
			},ms)
		}
			
		
		//添加一个属性，在一个函数里 ，判断熊此时的状态是up还是down，然后，再执行对应的清除和设置定时器interval
			
			
////	背景   sky cloud
		var star=$('#xingxing');//ul
		var star1=star.find('li:nth-of-type(1)');
		var star2=star.find('li:nth-of-type(2)');
		
		var cloud=$('#cloud');
		var cloud1=$('#cloud>li:nth-of-type(1)');
		var cloud2=$('#cloud>li:nth-of-type(2)');
		var cloud3=cloud1.clone().appendTo(cloud)
		
		var paodao=$('#paodao');
		var paodao1=$('#paodao>li:nth-of-type(1)');
		var paodao2=$('#paodao>li:nth-of-type(2)');
		var paodao3=$('#paodao>li:nth-of-type(2)');
		
		var begin=$(".begin");
		
		var c=0;//云 位移增加值
		var	move=0;// 星星 位移增加值
		var pd=0; // 跑道 位移增加值
		// 云
		function cloudMove(){
			var CloudInterval=setInterval(function(){
				if(animate=="stop"){
					clearInterval(CloudInterval)
				}
				if(-parseFloat(cloud.css("left"))>2*html_w){
					//console.log("第一幅云已经位移完")
				cloud.css({"left":"0px"})
				c=0;
				}
				c-=3;
				cloud.css({"left":c+"px"})
				
			},16)
		}
		// 星星
		function starMove(){
			var StartInterval=setInterval(function(){
				if(animate=="stop"){
					clearInterval(StartInterval)
				}
				if(-parseFloat(star.css("left"))>html_w){
					//console.log("第一幅星已经位移完")
				star.css({"left":"0px"})
				move=0;
				}
				move-=3;
				star.css({"left":move+"px"})
				
			},10)
		}					//if,  5000m,10000m定时器每隔5s走一张出来
		// 跑道
		function paodaoMove(){
			var paodaoInterval=setInterval(function(){
//				if(animate=="stop"){
//					clearInterval(paodaoInterval)
//				}
				if(-parseFloat(paodao.css("left"))>2*html_w){
//					console.log("第一幅跑道已经位移完")
					paodao.css({"left":"0px"})
					paodao1.css({"display":"block"})
					pd=0;
				}
				if(animate=="slide part1"){
					pd-=3;//console.log("减速1")
				}else if(animate=="slide part2"){
					pd-=2;//console.log("减速2")
				}else if(animate=="slide part3"){
					pd-=1;//console.log("减速3")
				}else if(animate=="stop"){
					clearInterval(paodaoInterval);
				}else{
					pd-=4;//console.log("原始速度")
				}
				paodao.css({"left":pd+"px"})
				
				
			},4)
		}
		
		function begining(){
			begin.animate({"left":-html_w+"px"},1000,"linear")
			cloudMove();
			starMove();
			paodaoMove();
		}
		
		

		
		
		// 创建对象
			var queue = new createjs.LoadQueue();
			// 监听进度
			queue.on('progress',function(e){
				// 获取百分比
				var p  = parseInt(e.progress*100) + "%";
				$('.loadingpercent').text(p)
//				console.log(p);
			},this)
			// 监听完成
			queue.on('complete',function(){
				console.log('complete');
				$('#loading').css({"display":"none"})
				$('#ready').css({"display":"block"})
				$('#bgr').css({"display":"block"})
				
					
				
			},this);
			// 加载资源列表
		queue.loadManifest([
			{src:"img/bear.png"},
			{src:"img/begin_paodao_bg.png"},
			{src:"img/bg_back.jpg"},
			{src:"img/pao1.png"},
			{src:"img/pao2.png"},
			{src:"img/pao3.png"},
			{src:"img/pao4.png"},
			{src:"img/pao5.png"},
			{src:"img/pao6.png"},
			{src:"img/pao7.png"},
			{src:"img/pao8.png"},
			{src:"img/pao9.png"},
			{src:"img/pao10.png"},
			{src:"img/pao11.png"},
			{src:"img/pao12.png"},
			{src:"img/paodao_bg1.png"},	
			{src:"img/paodao_bg2.png"},
			{src:"img/power_wrap.png"},
			{src:"img/power.png"},
			{src:"img/sky_bg1.png"},
			{src:"img/sky_bg2.png"},
			{src:"img/xingxing_bg.png"},
			{src:"img/zhentou1.png"},
			{src:"img/end.png"}
		])
		


		/*****上升****/
		
//		function up(){
//			//up初始化
//			s=1;ss=1;hh=undefined;h=parseInt(bear.css("bottom"));
//			
//			/***能量条***/
//			var power_w=parseInt($('.power').css('width'))
//			power.css({'width':(power_w-html_w*0.1)+"px"})
//			console.log("power_w ：",power_w)
//			if(power_w<=0){
//				$('body').off('touchstart',up);
////				down();
//				}
//			/***能量条****/
//		
//				var j1=setInterval(function(){
//			if(s<=part1){
//				s+=4;
//			bear.css({"bottom":h+s+"px"})
//			
//		}else if(ss<=part2){ 
//			hh=h+s;//从第一段的基础上增加
//			ss+=2;//
//			bear.css({"bottom":hh+ss+"px"})
//		}if(hh+ss-h>=jump){ // 高度差是否达到预定跳跃距离
//			clearInterval(j1);
//			down();
//		}
//		},30)
//			
//
//		}
		/***下降****/
//function down(){
//			var html_h=parseInt( $('html').css('height'));// 页面的高度
//			var zero=parseInt(html_h*0.4);//原点的高度
//			var h =parseInt(bear.css("bottom"));//熊当前的位置
//			var	d = h-zero; //当前位置与原点高度差
////			var y=20;var b=30;var botm;
//			var part1=d*(1.5/10);
//			var part2=d*(3.5/10);
//			var part3=d*(5/10);
//			var p1=1,p2=1,p3=1;
////			console.log("d",d,part1)
//	// 监听下降时候是否点击
//	$('body').on('touchstart',clearDown);
//	//再点击的时候清除下降的定时器和 监听事件
//		function clearDown(){
//				//down初始化
////				console.log('have?')
//			var power_w=parseInt($('.power').css('width'))
//			
//				clearInterval(d1);
//				//监听下降过程如果点击就清除下降
//				$('body').off('touchstart',clearDown);
//				//
//				
//		}
//			var d1 =setInterval(function(){
//				if(p1<=part1){
//					p1+=2;
//					bear.css({"bottom":d-p1+zero+"px"});
////					console.log("1",p1,part1)
//				}else if(p2<=part2){
////					console.log("2",p2,part2)
//					dd=d-p1
//					p2+=4;
//					bear.css({"bottom":dd-p2+zero+"px"});
//				}else if(p3<=part3){
////					console.log("3",p3,part3)
//					ddd=dd-p2
//					p3+=6;
//					bear.css({"bottom":ddd-p3+zero+"px"});
//				}else if(ddd-p3<=0||d==0){
//					clearInterval(d1);console.log("clear",ddd-p3,zero)
//				}
//			},30)
//		
//	}	
		// 云
//		function cloudo(){
//			cloud1.animate({"left":-html_w*1.1+"px"},2000,"linear"
//				,function(){
//					cloud1.css({"left":html_w*1.1+"px"})
//					cloudo();
//				})
//			}
//		function cloudt(){
//			cloud2.delay(1000).animate({"left":-html_w*1.1+"px"},2000,"linear"
//				,function(){
//					cloud2.css({"left":2*html_w+'px'})
//					cloudt();
//			})
//			}
//				cloud2.animate({"left":-html_w*1.1+"px"},4000,"linear"
//				,function(){
//					cloud2.css({"left":2*html_w+'px'})
//		//			cloud()
//				})
//				cloud3.animate({"left":-html_w+"px"},6000,"linear"
//				,function(){
//					cloud3.css({"left":3*html_w+'px'})
//					cloud()
//				})
//		
		//星星
//		var t_xing=setInterval(function(){
//			xing1_left-=10;
//			xing2_left-=10;xing3_left-=10;
//			li1.css({"left":xing1_left+"px"})
//			li2.css({"left":xing2_left+"px"})
//			li3.css({"left":xing3_left+"px"})
//			
//			if(xing1_left<-html_w){
//				xing1_left=2*html_w;
//				li1.css({"left":xing1_left+"px"})
//			}if(xing2_left<-html_w){
//				xing2_left=2*html_w;
//				li2.css({"left":xing2_left+"px"})
//			}if(xing3_left<-html_w){
//				xing3_left=2*html_w;
//			li3.css({"left":xing3_left+"px"})
//			}

//		},9);	

//			star1.animate({"left":-html_w+"px"},1800,"linear"
//							,function(){
//								star1.css({"left":html_w+"px"})
//								
//							})
//							star2.delay(900).animate({"left":-html_w+"px"},1800,"linear"
//							,function(){
//								star2.css({"left":html_w+'px'})
//							})
//							star3.delay(1800).animate({"left":-html_w+"px"},1800,"linear"
//							,function(){
//								star3.css({"left":html_w+'px'})
//								starMove()	
//							})
				
		
//		}
</script>
</html>